<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>登录</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/layui/css/login.css" />
</head>
<body class="beg-login-bg">
<div class="beg-login-box">
    <header>
        <h1>后台登录</h1>
    </header>
    <div class="beg-login-main">
        <form action="" class="layui-form" method="post">
            <div class="layui-form-item">
                <label class="beg-login-icon">
                    <i class="layui-icon">&#xe612;</i>
                </label>
                <input type="text" name="userName" lay-verify="userName" autocomplete="off" placeholder="这里输入登录名" class="layui-input username">
            </div>
            <div class="layui-form-item">
                <label class="beg-login-icon">
                    <i class="layui-icon">&#xe642;</i>
                </label>
                <input type="password" name="password" lay-verify="password" autocomplete="off" placeholder="这里输入密码" class="layui-input">
            </div>
            <div class="layui-form-item">
                <div class="beg-pull-left" style="width: 130px;">
                    <label class="beg-login-icon">
                        <i class="layui-icon">&#xe642;</i>
                    </label>
                    <input type="text" name="captcha" lay-verify="captcha" autocomplete="off" placeholder="输入验证码" class="layui-input">
                </div>
                <div class="beg-pull-right">
                    <img src="{:url('util.captcha')}" onclick="javascript:this.src='{:url(\'util.captcha\')}?tm='+Math.random()" title="单击刷新验证码" id="img_rand_code" alt="" style="cursor: pointer;">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="beg-pull-left beg-login-remember">
                    <label>记住帐号？</label>
                    <input type="checkbox" name="rememberMe" value="true" lay-skin="switch" checked title="记住帐号">
                </div>
                <div class="beg-pull-right">
                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="login">
                        <i class="layui-icon">&#xe650;</i> 登录
                    </button>
                </div>
                <div class="beg-clear"></div>
            </div>
        </form>
    </div>
    <footer>
        <p> © 91-t.com</p>
    </footer>
</div>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/md5.js"></script>
<script>
    layui.use(['layer', 'form'], function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        $(".username").focus();
        form.verify({
            userName:function (value) {
                if(value.length === 0 || $.trim(value).length === 0) {
                    return "登录名不能为空";
                }
            },
            password:[/(.+){6,12}$/, '密码必须6到12位'],
            captcha:[/^[a-zA-Z0-9]{4}$/, '验证码必须是4位']
        });
        form.on('submit(login)',function(data){
//            console.log(data.field);
            var index;
            $.ajax({
                type:   'post',
                url :   "{:url('admin.login')}",
                data:   {userName: data.field.userName, password: hex_md5(data.field.password), captcha: data.field.captcha, rememberMe: data.field.rememberMe},
                dataType:'json',
                beforeSend:function () {
//                    layer.msg('登陆中...');
                    index = layer.load(1, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    });
                },
                success:function (data) {
                    layer.close(index);
                    if(data.errCode == "0") {
                        window.location.href = "{:url('/')}"
                    } else {
                        $("#img_rand_code").attr("src","{:url('util.captcha')}?tm="+Math.random());
                        layer.msg(data.msg);
                    }
                    return false;
                }
            });
//            layer.alert(JSON.stringify(data.field), {
//                title: '最终的提交信息'
//            });
            return false;
        });
    });

</script>
</body>
</html>